/* eslint-disable eqeqeq */
/* eslint-disable no-unused-vars */
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import {
  Card,
  Button,
  Modal,
  Tag,
  Image,
  message,
  Form,
  Input,
  Select,
} from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, success } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'
import { Unite } from '@/utils/Unite'
import ImageWithToken from '@/plugins/ImageWithToken'
import ImageWithTokenBig from '@/plugins/ImageWithTokenBig'

import VeWithToken from '@/plugins/veWithToken'
import PdfWithToken from '@/plugins/pdfWithToken'

const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    label_list: [],
    course_label: '全部课程',
    total: 0, //总页数
    current: 1,
    pageSize: 10,
    dataSource: [
      // {
      //     available_type: 1, // 可用类型 1 私有 2 共享
      //     class_id: 4,
      //     classroom_name: "python基础课程3",
      //     create_time: "2024-07-02 23:14",
      //     designwork_name: "基础作品4",
      //     id: 11,
      //     student_name: "小风"
      // },
      // {
      //     available_type: 1, // 可用类型 1 私有 2 共享
      //     class_id: 4,
      //     classroom_name: "python基础课程3",
      //     create_time: "2024-07-02 23:14",
      //     designwork_name: "基础作品4",
      //     id: 12,
      //     student_name: "小风"
      // }
    ],
    visible: false,
    items: {
      course_type: 1,
      course_content: '',
    },
    initialValues: {},
    class_id: 1,
    mockData: [],
  }

  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 10)
    this.classlist()
  }
  classlist = () => {
    post('class/list', {}).then((res) => {
      let data = res.data
      // if (data.length > 0) {
      //     this.setState({ mockData: data, class_id: data[0].id })
      //     let initialValues ={
      //         class_id: data[0].id,
      //     }
      //     this.formRef.current.setFieldsValue(initialValues)
      // } else {
      this.setState({ mockData: data })
      // }
    })
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  handleSaveBtn = (values) => {
    this.setState({ initialValues: values })
    this.onChangeCurPageOrPageSize(1, 10)
  }
  getData = (current, pageSize) => {
    let data = {
      page_index: current,
      page_size: pageSize,
      ...this.state.initialValues,
    }
    post('designwork/class/list', data).then((res) => {
      this.setState({ dataSource: res.data, total: res.size })
    })
  }
  Label = (item) => {
    this.setState({ course_label: item })
    this.onChangeCurPageOrPageSize(1, 10)
  }
  modal = (item) => {
    this.props.history.push(`/works/Class/${item}`)
  }

  handleOk = () => {
    if (this.ChildPage && this.state.items.course_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visible: false,
      items: {
        course_type: 1,
        course_content: '',
      },
    })
  }
  handleCancel = () => {
    if (this.ChildPage && this.state.items.course_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visible: false,
      items: {
        course_type: 1,
        course_content: '',
      },
    })
  }
  handleChildEvent = (ref) => {
    this.childRef = ref
  }
  // 随机数
  getRandomInt(min, max) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min + 1)) + min
  }
  // 调用函数生成一个22以内的随机整数（0-21）
  Zs = (key, id) => {
    if (key == 1) {
      let data = {
        id: id,
      }
      post('designwork/share/enable', data).then((res) => {
        this.onChangeCurPageOrPageSize(1, 10)
      })
    } else {
      let data = {
        id: id,
      }
      post('designwork/share/disable', data).then((res) => {
        this.onChangeCurPageOrPageSize(1, 10)
      })
    }
  }
  handleReset = () => {
    this.setState({ initialValues: {} })
    this.formRef.current.resetFields()
    let that = this
    setTimeout(function () {
      that.getData(1, 10)
    }, 500) //延时10秒
  }
  render() {
    const { i18n } = this.props
    const { dataSource, mockData, items, class_id, initialValues } = this.state
    const formProps = {
      name: 'basic',
      onFinish: this.handleSaveBtn,
      initialValues,
      ref: this.formRef,
    }
    return (
      <div className="ct">
        <div className="ban">
          <div className="tetli">班级作品</div>
          <div
            style={{
              width: '60px',
              height: '6px',
              background:
                'linear-gradient( 270deg, rgba(37,111,254,0) 0%, #256FFE 100%)',
            }}
          ></div>
          <Form className="forms" {...layoutlist} {...formProps}>
            <div>
              <Form.Item className={styles.antBut} label="" name="class_id">
                <Select style={{ width: '260px' }} placeholder="搜索班级名称">
                  {mockData.map((item) => (
                    <Select.Option key={item.id} value={item.id}>
                      {item.class_name}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
            <div>
              <Form.Item
                className={styles.antBut}
                label=""
                name="designwork_name"
              >
                <Input
                  style={{ width: '260px', marginLeft: '12px' }}
                  placeholder="搜索作品名称"
                />
              </Form.Item>
            </div>
            <div>
              <Form.Item
                className={styles.antBut}
                label=""
                name="classroom_name"
              >
                <Input
                  style={{
                    marginLeft: '12px',
                    width: '260px',
                  }}
                  placeholder="搜索课堂名称"
                />
              </Form.Item>
            </div>
            <div>
              <Button className={styles.Po_Le} onClick={this.handleReset}>
                {i18n.t`Reset`}
              </Button>
              <Button
                type="primary"
                htmlType="submit"
                style={{ marginLeft: '12px' }}
              >
                {i18n.t`Search`}
              </Button>
            </div>
          </Form>
        </div>
        <div style={{ padding: '10px 0 36px 20px', width: '100%' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
            {dataSource.map((item) => {
              return (
                <div
                  style={{
                    margin: '10px',
                    padding: '7px',
                    border: '1px solid #cccccc6e',
                    borderRadius: '5px',
                    width: '18%',
                  }}
                >
                  <div
                    onClick={() => this.modal(item.id)}
                    style={{ cursor: 'pointer' }}
                  >
                    <img
                      alt=""
                      style={{
                        width: '100%',
                        height: '148px',
                        borderRadius: '4px',
                      }}
                      src={require('../../../imges/' +
                        this.getRandomInt(1, 50) +
                        '.png')}
                    />
                  </div>

                  <div
                    style={{
                      fontWeight: '500',
                      fontSize: '16px',
                      color: '#111111',
                      lineHeight: '24px',
                      marginTop: '8px',
                    }}
                    className={styles.text_overflow}
                  >
                    <div
                      style={{
                        fontWeight: '500',
                        fontSize: '16px',
                        color: '#111111',
                        lineHeight: '24px',
                        marginTop: '8px',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                      }}
                      className={styles.text_overflow}
                    >
                      <div style={{ width: '170px' }}>
                        <div className="cla1"> {item.designwork_name}</div>
                        <div className="cla3"> {item.classroom_name}</div>
                        <div
                          style={{
                            display: 'flex',
                            alignItems: 'center',
                          }}
                          className="dework"
                        >
                          <span className="cla12">
                            {item.creator_name == ''
                              ? '管理员'
                              : item.creator_name}
                          </span>
                          <span
                            style={{
                              width: '2px',
                              display: 'inline-block',
                              height: '16px',
                              background: '#00000063',
                              margin: '0 8px 0 0',
                            }}
                          ></span>
                          <span className="cla113">{item.create_time}</span>
                        </div>
                      </div>
                      <div>
                        <div style={{ cursor: 'pointer' }}>
                          {item.available_type == 1 ? (
                            <img
                              alt=""
                              style={{
                                width: '55px',
                              }}
                              src={require('../../../imges/Zs1.png')}
                              onClick={() => this.Zs(1, item.id)}
                            />
                          ) : (
                            <img
                              alt=""
                              style={{
                                width: '55px',
                              }}
                              src={require('../../../imges/Zs.png')}
                              onClick={() => this.Zs(2, item.id)}
                            />
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
          <Pagination
            current={this.state.current}
            pageSize={this.state.pageSize}
            total={this.state.total}
            handleChange={this.onChangeCurPageOrPageSize} //当前页及条数改变都会从子组件触发此方法，用于传递页码和条数
            pageSizeOptions={['10']} // 针对不同的组件需求传递每次多少条，不传已在分页组件写默认值了
          ></Pagination>
        </div>
        <Modal
          width={
            items.course_type == 1
              ? '40%'
              : items.course_type == 2
              ? '80%'
              : '40%'
          }
          title="课程内容"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          {/* 视频 */}
          {items.course_type == 1 ? (
            <div>
              <VeWithToken
                onRef={(c) => (this.ChildPage = c)}
                key={items.id}
                src={items.course_content}
              />
            </div>
          ) : (
            ''
          )}
          {/* pdf文档 */}
          {items.course_type == 2 ? (
            <div>
              <PdfWithToken key={items.id} src={items.course_content} />
            </div>
          ) : (
            ''
          )}
          {/*  */}
          {items.course_type == 3 ? <div></div> : ''}
          {/* 图片 */}
          {items.course_type == 4 ? (
            <div>
              <ImageWithTokenBig key={items.id} src={items.course_content} />
            </div>
          ) : (
            ''
          )}
        </Modal>
      </div>
    )
  }
}
Command.propTypes = {
  post: PropTypes.object,
  // loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default Command
